<template>
  <div class="app-container">

    <div class="leftPlace">



      <!--基本信息-->
      <div class="baseInfomation">
        <h2 style="font-weight: 100; font-size: 1.875rem; ">基本信息</h2> <br />
        <h3>物业类型:<span style="margin-left: 50px;font-weight:normal">{{houseTable.typesName}}</span>
          <span style="margin-left: 300px;">参考价格:<span style="margin-left: 50px;font-weight:normal">均价
              {{houseTable.avgPrice}}{{houseTable.avgUnit}}元/平</span></span>
        </h3>
        <h3>项目特色:<span style="margin-left: 50px;font-weight:normal">{{houseTable.feature}}</span>
          <span style="margin-left: 300px;">区域位置:<span
              style="margin-left: 50pxfont-weight:normal;">{{houseTable.a}}</span></span>
        </h3>
        <h3>楼盘地址:<span style="margin-left: 50px;font-weight:normal">{{houseTable.address}}</span> </h3>
        <h3>售楼处地址:<span style="margin-left: 50px;font-weight:normal">{{houseTable.salesAddress}}</span> </h3>
        <h3 style="width: auto;">开发商:<span style="margin-left: 50px;font-weight:normal">{{houseTable.developers}}</span>
        </h3>
      </div> <br /> <br />

      <!--规划信息-->
      <h2 style="font-weight: 100; font-size: 1.875rem; margin-left: 6.25rem; ">规划信息</h2> <br />
      <el-form ref="planningForm" :model="planning" v-model="planning"  :rules="planningRules" th="180px" :inline="true">
        <el-form-item label="建筑类型" prop="buildType">
          <el-input v-model="planning.buildType" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="绿化率(%)" prop="greeningRate">
          <el-input v-model="planning.greeningRate" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="占地面积(平方米)" prop="areaConvered">
          <el-input v-model="planning.areaConvered" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="容积率" prop="plotRatio">
          <el-input v-model="planning.plotRatio" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积(平方米)" prop="buildup">
          <el-input v-model="planning.buildup" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="物业类型" prop="propertyType">
          <el-select v-model="planning.propertyType" style="width: 400px;" placeholder="请选择物业类型">
            <el-option v-for="item in planningType" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规划户数"  prop="holds">
          <el-input v-model="planning.holds" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="产权年限(年)" prop="ageLimit">
          <el-input v-model="planning.ageLimit" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="最近交房" prop="delivery">
          <el-date-picker v-model="planning.delivery" type="date" style="width: 400px;" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建人" >
          <el-input v-model="planning.createBy" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" >
          <el-date-picker v-model="planning.createTime" type="date" style="width: 400px;" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改人" >
          <el-input v-model="planning.updateBy" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" >
          <el-date-picker v-model="planning.updateTime" type="date" style="width: 400px;" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <br />
        <el-button style="margin-left: 31.25rem;" type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="open">重新设定</el-button>
        </el-form-item>
      </el-form><br /> <br />

      <!--售卖资格-->
      <h2 style="font-weight: 100; font-size: 1.875rem; margin-left: 6.25rem; ">售卖资格</h2>
      <el-button type="primary" @click="addSell" style="margin-left: 6.25rem;">新增</el-button>
      <el-table :data="sellQuali" style="width: 50%;margin-left:6.25rem">
        <el-table-column prop="title" label="售卖资格" width="300">
        </el-table-column>
        <el-table-column prop="issuing" label="发证时间" width="180">
        </el-table-column>
        <el-table-column prop="binding" label="绑定楼栋">
        </el-table-column>
        <el-table-column prop="address" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="handupClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--售卖资格的对话框-->
      <el-dialog title="新增售卖资格" :visible.sync="dialogFormVisible" @close="dianjiguanbi">
        <el-form v-if="dialogFormVisible" :model="addSellForm" :rules="rules" ref="formSell" v-model="addSellForm" tyle="width: 43.75rem;">
          <el-form-item label="售卖资格" prop="title" :label-width="formLabelWidth">
            <el-input v-model="addSellForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发证时间" prop="issuing" :label-width="formLabelWidth">
            <el-date-picker v-model="addSellForm.issuing" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="绑定楼栋" prop="binding" :label-width="formLabelWidth">
            <el-input v-model="addSellForm.binding" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="sellCancle('form')">取 消</el-button>
      <el-button type="primary" @click="sellRight" :disabled="notRight">确 定</el-button>
    </div>
    </el-dialog>

    <!--配套信息-->
    <h2 style="font-weight: 100; font-size: 1.875rem; margin-left: 6.25rem; ">配套信息</h2> <br />
    <el-form ref="mattingForm" :rules="mattingRules"  :model="matting"   label-width="180px" :inline="true">
      <el-form-item label="物业公司" prop="propertyName">
        <el-input v-model="matting.propertyName" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="车位配比" prop="parkingConf">
        <el-input v-model="matting.parkingConf" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="物业费" prop="propertyFee">
        <el-input v-model="matting.propertyFee" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="供暖方式" prop="heating">
        <el-input v-model="matting.heating" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="供水方式" prop="water">
        <el-input v-model="matting.water" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="供电方式" prop="power">
        <el-input v-model="matting.power" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="车位" prop="pparkingLot">
        <el-input v-model="matting.pparkingLot" style="width: 400px;"></el-input>
      </el-form-item>
      <h4 style="margin-left: 6.25rem;">周边规划：</h4>
      <!-- <div>
          <el-form-item label="地铁">
            <el-input v-model="matting." style="width: 400px;"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="医院">
            <el-input v-model="matting.pparkingLot" style="width: 400px;"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="购物">
            <el-input v-model="matting.pparkingLot" style="width: 400px;"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="公园">
            <el-input v-model="matting.pparkingLot" style="width: 400px;"></el-input>
          </el-form-item>
        </div> -->
      <br />
      <el-button style="margin-left: 31.25rem;" type="primary" @click="onSubmitSupport">提交</el-button>
      <el-button @click="openSupport">重新设定</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
  import {
    getHouseList
  } from "../../../api/houseNew.js"
  import {
    upPlanning,
    onePlanning,
    addPlanning
  } from "../../../api/houseInfomation.js"
  import {
    getDictType
  } from "../../../api/data.js"
  import {
    oneSupport,
    updataSupport,
    addSupport
  } from "../../../api/houseSupport.js"
  import {
    getSellList,
    rightSellList,
    delSellList,
    upSellList
  } from "../../../api/houseSell.js"
  export default {
    name: "house",
    data() {
     //定义验证规则

      let isAge=(valid,value,callback)=>{
        if(value>18&&value<60){
          callback()
        }else callback("请输入18到60的数字")
      }
      return {
        //新房的初始化数据

        houseTable: [],
        //详细信息表单中的数据
        planning: {
          id: undefined,
          houseId: undefined,
          buildType: undefined,
          greeningRate: undefined,
          areaConvered: undefined,
          plotRatio: undefined,
          buildup: undefined,
          propertyType: undefined,
          holds: undefined,
          ageLimit: undefined,
          delivery: undefined,
          ageLimit: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        },
        //配套信息表单数据
        matting: {
          id: undefined,
          propertyName: undefined,
          parkingConf: undefined,
          propertyFee: undefined,
          heating: undefined,
          water: undefined,
          power: undefined,
          pparkingLot: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        },

        //对话框的确定按钮是否禁用
        notRight: false,
        //配套信息的验证规则
        mattingRules:{
          propertyName:[{required:true,message:'数据不能为空',trigger:'blur'}],
          parkingConf:[{required:true,message:'数据不能为空',trigger:'blur'}],
          propertyFee:[{required:true,message:'数据不能为空',trigger:'blur'}],
          heating:[{required:true,message:'数据不能为空',trigger:'blur'}],
          heating:[{required:true,message:'数据不能为空',trigger:'blur'}],
          water:[{required:true,message:'数据不能为空',trigger:'blur'}],
          power:[{required:true,message:'数据不能为空',trigger:'blur'}],
          pparkingLot:[{required:true,message:'数据不能为空',trigger:'blur'}],
        },
        //详细信息的验证规则
        planningRules:{
          buildType:[{required:true,message:'数据不能为空',trigger:'blur'}],
          greeningRate:[{required:true,message:'数据不能为空',trigger:'blur'}],
          areaConvered:[{required:true,message:'数据不能为空',trigger:'blur'}],
          plotRatio:[{required:true,message:'数据不能为空',trigger:'blur'}],
          propertyType:[{required:true,message:'数据不能为空',trigger:'blur'}],
          holds:[{required:true,message:'数据不能为空',trigger:'blur'}],
          ageLimit:[{required:true,message:'数据不能为空',trigger:'blur'}],
          delivery:[{required:true,message:'数据不能为空',trigger:'blur'}],
          buildup:[{required:true,message:'数据不能为空',trigger:'blur'}],

        },


        //售卖资格的验证规则
        rules: {
          title: [{
            required: true,
            message:'售卖资格不能为空',
            trigger: 'blur'
          },
          //此处为自己定义的验证规则
          //{validator:isAge,trigger:'blur'}
          ],
          issuing: [{
            required: true,
            message: '111不能为空',
            trigger: 'blur'
          }],
          binding: [{
            required: true,
            message: '222不能为空',
            trigger: 'blur'
          }]
        },
        //区分是新增还是编辑
        isSellAdd: true,
        //销售资格表单
        formLabelWidth: '120px',
        sellQuali: [],
        //售卖资格的对话框
        addSellForm: {},
        //对话框开关
        dialogFormVisible: false,
        //获取详细信息的种类
        planningType: [],
        isplanningAdd: false,
        isSupportAdd: false,

      }
    },
    methods: {

      dianjiguanbi() {
        this.addSellForm = {}
      },
      //对话框的取消按钮
      sellCancle(formName) {
        this.addSellForm = {}
        this.$refs[formName].resetFields();
        this.reset()
        this.dialogFormVisible = false
      },
      //对话框的确定按钮
      sellRight:function() {
        this.$refs['formSell'].validate(valid =>{
          if(valid){
            if (this.isSellAdd) {
              rightSellList(this.addSellForm).then(resp => {
                this.$message({
                  message: '新增售卖资格成功',
                  type: 'success'
                });
              })
              this.addSellForm = {}
              this.loadHouse()
              this.dialogFormVisible = false
            }
            if (!this.isSellAdd) {
              //此时编辑页面
              upSellList(this.addSellForm).then(resp => {})
              this.addSellForm = {}
              this.loadHouse()
              this.dialogFormVisible = false
             }
          }else console.log("验证未通过")
        })


        //此时为新增功能

      },
      // 重置
      reset() {
        this.addSellForm = {
          title: undefined,
          issuing: undefined,
          binding: undefined
        }
        this.$refs['form'].resetFields();
      },
      //售卖资格的新增按钮
      addSell() {
        this.isSellAdd = true
        this.dialogFormVisible = true
      },
      //售卖资格单行编辑
      handupClick(a) {
        this.isSellAdd = false
        this.dialogFormVisible = true
        this.addSellForm = a
      },
      //售卖资格单行删除
      handleClick(a) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$message({
            type: 'success',
            message: '删除成功!'
          });

          delSellList(a.id).then(resp => {
            this.loadHouse()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      openSupport() {
        this.$confirm('是否删除表中数据,重新自定义?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var a = this.matting.id
          this.matting = {}
          this.matting.id = a
        }).catch(() => {});
      },

      //配套信息表的提交按钮
      onSubmitSupport() {
        if (this.isSupportAdd) {

          addSupport(this.matting).then(resp => {
            this.$message({
              message: '新增配套信息成功',
              type: 'success'
            });
          })
          this.loadHouse()
        }
        if (!this.isSupportAdd) {

          updataSupport(this.matting).then(resp => {

            this.$message({
              message: '修改配套信息成功',
              type: 'success'
            });
          })
          this.loadHouse()

        }

      },
      //取消按钮
      open() {
        this.$confirm('是否删除表中数据,重新自定义?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var a = this.planning.id
          this.planning = {}
          this.planning.id = a
        }).catch(() => {});
      },
      //主房传送过来的需要显示的数据 没有修改权限
      loadHouse() {
        var a = {}
        a["id"] = this.$router.currentRoute.params.id
        getHouseList(a).then(resp => {
          this.houseTable = resp.data[0]
          this.planning.houseId = resp.data[0].id

          onePlanning(this.planning.houseId).then(respa => {
            this.planning = respa.data
            if (respa.data.id === undefined) {
              this.isplanningAdd = true
              this.planning.houseId = this.$router.currentRoute.params.id
            } else this.isplanningAdd = false
          })

          this.matting.id = resp.data[0].id
          oneSupport(resp.data[0].id).then(respb => {
            this.matting = respb.data
            if (respb.data.id === undefined) {
              this.isSupportAdd = true
              this.matting.houseId = this.$router.currentRoute.params.id
            } else this.isSupportAdd = false
          })
          // this.sellQuali.id=resp.data.id
          //设置售卖资格表绑定的houseNewId
          this.addSellForm.houseNewId = resp.data[0].id
          getSellList(resp.data[0].id).then(respc => {
            this.sellQuali = respc.data
          })
        })
      },
      //planning表格的提交按钮  其实此按钮相当于一个修改按钮
      onSubmit() {
        this.$refs['planningForm'].validate(valid=>{
          if(valid){
            if (this.isplanningAdd) {
              addPlanning(this.planning).then(resp => {
                this.$message({
                  message: '新增规划信息成功',
                  type: 'success'
                });
              })
              this.loadHouse()
            }
            if (!this.isplanningAdd) {
              upPlanning(this.planning).then(resp => {
                this.$message({
                  message: '修改规划信息成功',
                  type: 'success'
                });
              })
              this.loadHouse()
            }
          }else{
            console.log("planningForm没有通过验证")
          }
        })
      },
      getPlanningType() {
        var type = "house_property"
        getDictType(type).then(resp => {
          this.planningType = resp.data
        })
      }
    },
    created() {
      this.loadHouse()
      this.getPlanningType()
    }
  }
</script>
<style>
  .baseInfomation {
    width: 800px;
    height: auto;
    /* 设置样式的宽度*/
    margin-left: 100px;
    /* 设置样式外边距   内边距是 padding*/
    border-bottom: 0.0625rem solid #D9D9D9;
  }
</style>
